<template>
	<!-- 投放系统-订单列表 -->
	<d2-container class="d-flex flex-column mod-sys__user">
		<template v-if="$hasPermission('delivery:payment:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10 flex-wrap" :inline="true" size="small" :model="dataForm" label-position="right"
					@keyup.enter.native="getTableList(true)" @submit.native.prevent>
						<el-form-item label="创建时间">
							<el-date-picker v-model="dataForm.created_at" type="datetimerange" range-separator="至"
							value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="订单属性">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.order_id" placeholder="订单号" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.transaction_id" placeholder="交易单号" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.user_id" placeholder="用户id" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.ad_id" placeholder="计划id" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.spread_id" placeholder="推广链接id" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.keyword" placeholder="短剧名称" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.spread_name" placeholder="推广链名称" clearable />
						</el-form-item>
						<el-form-item prop="is_first" label="首充">
							<el-select class="mb-5" clearable v-model="dataForm.is_first" placeholder="请选择是否首充">
								<el-option v-for="(item,index) in firstType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="is_backhaul" label="回传">
							<el-select class="mb-5" clearable v-model="dataForm.is_backhaul" placeholder="请选择是否回传">
								<el-option v-for="(item,index) in backhaulType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="goods_type" label="订单类型">
							<el-select class="mb-5" clearable v-model="dataForm.goods_type" placeholder="请选择订单类型">
								<el-option v-for="(item,index) in goodsType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="status" label="订单状态">
							<el-select class="mb-5" clearable v-model="dataForm.status" placeholder="请选择订单状态">
								<el-option v-for="(item,index) in statusArr" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="status" label="用户类型">
							<el-select class="mb-5" clearable v-model="dataForm.user_platform" placeholder="请选择用户类型">
								<el-option v-for="(item,index) in platformArr" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="pay_type" label="支付场景">
							<el-select class="mb-5" clearable v-model="dataForm.pay_type" placeholder="请选择支付场景">
								<el-option v-for="(item,index) in payType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="支付金额">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.amount[0]" @input="(v)=>(dataForm.amount[0]=handleNumber2(v,2,6,false))" placeholder="开始金额" clearable />
						</el-form-item>
						<el-form-item label="">
							<el-input class="d-flex mr-5 mb-5 input-list-item" v-model="dataForm.amount[1]" @input="(v)=>(dataForm.amount[1]=handleNumber2(v,2,6,false))" placeholder="结束金额" clearable />
						</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">搜索</el-button>
						<el-button v-if="$hasPermission('delivery:payment:batchBackhaul')" icon="el-icon-s-check" type="warning" @click="checkBackhaul()">批量上报</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="paymentTable" key="paymentTable" border height="100%" resizable :data="dataList" :loading="tableLoading"
							:checkbox-config="{checkMethod: CheckboxIsDisabled}"
							@checkbox-all="selectAllEvent"
							@checkbox-change="selectChangeEvent"
							:loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
							<vxe-column class-name="checkboxClass" type="checkbox" field="checkbox"  width="80" align="center">
								<template #default="{ row }">
									<div v-if="!(row.is_backhaul=='N'&&row.status==2)" class="position-absolute top-0 left-0 d-flex w-100 h-100">
										<div class="d-flex w-100 a-center j-center">
											<div class="w-90 h-90 rounded-40 bg-white"></div>
										</div>
									</div>
								</template>
							</vxe-column>
							<vxe-column width="180" field="dyeing_time" title="用户染色时间" sortable align="center"></vxe-column>
							<vxe-column width="180" field="pay_time" title="充值时间" sortable align="center"></vxe-column>
							<vxe-column width="100" field="id" title="订单id" sortable align="center"></vxe-column>
							<vxe-column v-if="$hasPermission('delivery:payment:getOrderDetail')" width="120" title="订单详情" align="center">
								<template v-slot="{ row }">
									<el-button v-if="( row.type==1 && row.pay_type==1 &&row.status==2 ) || row.type == 2" icon="" style="width: 70px;" size="small" round type="primary" @click="checkOrderDetails(row)">查看</el-button>
								</template>
							</vxe-column>

							<vxe-column  width="120" title="订单回传详情" align="center">
								<template v-slot="{ row }">
									<el-button v-if="row.is_handle=='Y'" icon="" style="width: 70px;" size="small" round type="primary" @click="checkBackhaulInfo(row)">查看</el-button>
								</template>
							</vxe-column>
							
							<vxe-column width="100" field="user_id" title="用户id" sortable align="center"></vxe-column>
							<vxe-column width="100" field="user_platform_name" title="用户类型" sortable align="center"></vxe-column>
							<vxe-column width="150" field="amount" title="充值金额" sortable align="center"></vxe-column>
							<vxe-column width="150" field="is_backhaul" title="手动上报" align="center">
								<template v-slot="{ row }">
									<el-button v-if="row.is_backhaul=='N'&&row.status==2&&$hasPermission('delivery:payment:backhaul')" icon="" size="small" round type="primary" @click="postbackhaul(row)">手动上报</el-button>
									<div v-else-if="row.is_backhaul=='Y'" style="color: #67c23a;font-weight: bold; font-size: 18px;">已上报</div>
								</template>
							</vxe-column>
							<vxe-column width="150" field="recharge_number" title="充值次数" sortable align="center"></vxe-column>
							<vxe-column width="120" field="status_name" title="订单状态" align="center"></vxe-column>
							<vxe-column width="180" field="ad_id" title="计划id" sortable align="center"></vxe-column>
							<vxe-column width="180" field="pay_type_name" title="充值场景" align="center"></vxe-column>
							<vxe-column width="180" field="recharge_goods_name" title="订单类型" align="center"></vxe-column>
							<vxe-column width="180" field="applet_name" title="小程序名称" align="center"></vxe-column>
							<vxe-column width="100" field="spread_id" title="推广链接id" sortable align="center"></vxe-column>
							<vxe-column width="180" field="spread_name" title="推广名称" align="center"></vxe-column>
							<vxe-column width="100" field="goods_id" title="充值模板id" sortable align="center"></vxe-column>
							<vxe-column width="180" field="playlet_name" title="短剧名称" align="center"></vxe-column>
							<vxe-column width="180" field="order_time" title="订单时间" sortable align="center"></vxe-column>
						
							
							<vxe-column width="230" field="order_id" title="订单号" sortable align="center"></vxe-column>
							<vxe-column width="230" field="transaction_id" title="交易单号" sortable align="center"></vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有订单数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<el-dialog title="重要提示" class="checkTipDialog" :visible.sync="checkTipVisible" width="600px" center>
				<span>批量上报已选列表：</span>
				<ul class="data-list">
					<li v-for="(item,index) in records" :key="index">
						{{'订单号：'+item.order_id}}
					</li>
				</ul>
				<span slot="footer" class="dialog-footer">
					<el-button class="mr-10" @click="checkTipVisible = false">取 消</el-button>
					<el-button class="ml-10" type="primary" @click="submitExamine()">确认批量上报</el-button>
				</span>
			</el-dialog>
			<!-- 订单详情弹窗 -->
			<payment-order-details v-if="orderVisible" ref="orderDialog" @refreshDataList="getTableList()"></payment-order-details>
			<payment-order-details2 v-if="orderVisible2" ref="orderDialog2" @refreshDataList="getTableList()"></payment-order-details2>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		handleNumber2
	} from '@/libs/validate'
	import { Message,MessageBox } from 'element-ui'
	import mixinViewModule from '@/mixins/view-module'
	import paymentOrderDetails from './paymentOrderDetails'
	import paymentOrderDetails2 from './paymentOrderDetails2'
	import * as clipboard from 'clipboard-polyfill'
	export default {
		mixins: [mixinViewModule],
		components: {
			paymentOrderDetails,
			paymentOrderDetails2
		},
		data() {
			return {
				checkIDArray: [],
				orderVisible: false,
				orderVisible2: false,
				checkTipVisible: false,
				records: [],
				tableLoading: false,
				handleNumber2,
				firstType:[{
					label:'非首充',
					value:0,
				},{
					label:'首充',
					value:1,
				}],
				backhaulType:[{
					label:'未回传',
					value:'N',
				},{
					label:'已回传',
					value:'Y',
				}],
				goodsType:[{
					label:'普通充值',
					value:1,
				},{
					label:'1天会员',
					value:2,
				},{
					label:'3天会员',
					value:3,
				},{
					label:'7天会员',
					value:4,
				},{
					label:'15天会员',
					value:5,
				},{
					label:'月度会员',
					value:6,
				},{
					label:'季度会员',
					value:7,
				},{
					label:'半年会员',
					value:8,
				},{
					label:'年度会员',
					value:9,
				},{
					label:'整剧购买',
					value:10,
				},{
					label:'挽留充值',
					value:11,
				}
			],
				statusArr:[{
					label:'全部',
					value:0,
				},{
					label:'待支付',
					value:1,
				},{
					label:'已支付',
					value:2,
				},{
					label:'已取消',
					value:3,
				},{
					label:'已退款',
					value:4,
				}],
				platformArr:[{
					label:'Android',
					value:1,
				},{
					label:'Ios',
					value:2,
				}],
				payType:[{
					label:'微信虚拟支付',
					value:1,
				},{
					label:'微信支付',
					value:2,
				},{
					label:'抖音微信支付',
					value:3,
				},{
					label:'抖音支付宝支付',
					value:4,
				},{
					label:'抖音支付',
					value:5,
				}],
				curent: 0,
				total: 0,
				dataForm: {
					page: 1,
					pageSize: 20,
					amount:['',''],//查询金额
					keyword: '', //搜索
					user_platform:''

				},
				// 增改
				addOrUpdateVisible: false,
				roleVisible: false,
				dataList: [],
				customColumns: [],
				playTitle: '',
				innerDownloadVisible: false, //是否显示下载视频进度
				downloadPercentage: 0,
				examineType: 1 //1微信，2抖音
			}
		},
		created() {
			this.dataForm['applet_ids'] = this.info.applet_id;
			this.dataForm['delivery_user_id'] = this.info.delivery_user_id;
		},
		mounted() {
			that = this;
		},
		watch: {
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========监听小程序ID发生变化=======');
							console.log(newVal);
							this.dataForm['applet_ids'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:payment:index')) {
								if(this.$hasPermission('delivery:delivery:teamList')){
									if(Array.isArray(this.dataForm['delivery_user_id'])){
										this.getTableList();
									}
									return;
								}
								this.getTableList();
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.dataForm['delivery_user_id'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:payment:index')) {
								this.getTableList();
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			CheckboxIsDisabled({
				row
			}) {
				// console.log(row);
				return row.is_backhaul=='N'&&row.status==2
			},
			selectAllEvent({
				checked
			}) {
				this.records = this.$refs.paymentTable.getCheckboxRecords();
				this.checkIDArray = this.records.map(element => element.id);
				console.log(this.checkIDArray);
			},
			selectChangeEvent({
				checked
			}) {
				this.records = this.$refs.paymentTable.getCheckboxRecords();
				this.checkIDArray = this.records.map(element => element.id);
				console.log(this.checkIDArray);
			},
			// 检查勾选
			async checkBackhaul() {
				if (!this.checkIDArray.length) {
					return this.$message({
						message: '请先勾选下面的数据！',
						type: 'error',
						duration: 1500
					})
				}
				this.checkTipVisible = true;
			},
			async checkOrderDetails(row){
				this.orderVisible = true;
				this.$nextTick(() => {
					this.$refs.orderDialog.init(row);
				})
			},
			async checkBackhaulInfo(row){
				this.orderVisible2 = true;
				this.$nextTick(() => {
					this.$refs.orderDialog2.init2(row);
				})
			},
			async submitExamine() {
				this.checkTipVisible = false;
				const examineRes = await this.$axios.post('/api/delivery/payment/batchBackhaul', {
					ids: this.checkIDArray
				});
				this.$refs.paymentTable.clearCheckboxRow()
				if(Array.isArray(examineRes)){
					if(examineRes.length){
						let html_String = '';
						html_String+="<div style='height:350px;overflow:auto;'>"
						for (var i = 0; i < examineRes.length; i++) {
							if(examineRes[i]){
								html_String+=`<span>${examineRes[i]}</span></br>`
							}
						}
						html_String+='</div>'
						MessageBox.alert(html_String,{
							title:'结果提示',
							dangerouslyUseHTMLString: true
						})
					}
				}
				console.log(examineRes);
			},
			copyText(text) {
				console.log(text);
				if (!text) {
					return that.$message({
						message: '数据为空，无法复制！',
						type: 'error',
						duration: 1500
					})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			async getTableList(init=false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				let newDataForm = {...this.dataForm};
				if(!this.dataForm.amount[0]&&!this.dataForm.amount[1]){
					delete newDataForm.amount;
				}
				this.tableLoading = true;
				console.log(newDataForm);
				const tableRes = await this.$axios.get('/api/delivery/payment?' + this.$qs.stringify(newDataForm));
				this.tableLoading = false;
				if(typeof tableRes == 'object' && tableRes!=null){
					this.total = tableRes.total||0;
					if(Array.isArray(tableRes.data)){
						let tdlen = tableRes.data.length;
						if(tdlen){
							this.dataList = tableRes.data;
							return
						}
					}
				}
				this.dataList = [];
			},
			 postbackhaul(row){

				// const backhaulRes = await this.$axios.get(`/api/delivery/payment/backhaul/${row.id}`);
				// this.getTableList();
				// that.$message({message: '上报成功！',type: 'success',duration: 2000});
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('手动上报')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(async () => {
					await this.$axios.post(`/api/delivery/payment/backhaul/${row.id}`);
					console.log(458)
					this.getTableList();
					that.$message({message: '上报成功！',type: 'success',duration: 2000});
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.checkboxClass .vxe-checkbox--label){
		padding-left: 0!important;
	}
	.successTag {
		background-color: #CAF0BA;
		color: #376F1F;
	}

	.warnTag {
		background-color: #fff1dc;
		color: #e6a23c;
	}

	.checkTipDialog :deep(.el-dialog__body) {
		padding: 5px 25px 0px 25px;
	}

	.innerVideoDialog :deep(.el-dialog__body) {
		padding: 0px !important;
	}

	.dplayer {
		height: 450px;
	}

	.checkTipDialog {
		.data-list {
			min-height: 200px;
			max-height: 450px;
			overflow-y: auto;
			padding: 0px;
			text-indent: 10px;
			margin: 5px 0px 0px 0px;
			list-style-type: none;

			li {
				cursor: pointer;
				border-radius: 6px;
				padding: 10px 0px 10px 0px;
			}

			li:hover {
				background-color: #f1f1f1;
				color: #409EFF;
			}
		}
	}
</style>